<!--
 * @Description: 
 * @ComposerRequire: 
 * @ComposerRemove: 
 * @Author: 阿海 <764882431@qq.com>
 * @Date: 2021-05-20 10:06:23
 * @LastEditTime: 2021-06-01 11:55:43
 * @LastEditors: 阿海
-->
    <div id="icons-list">
        <input type="text" placeholder="请输入图标关键词" autocomplete="off" class="layui-input search-icons" value="">
        <hr>
        <ul class="search-icons-list">
            <div class="layui-inline" style="text-align: center;width:100%;color:#e2e2e2">暂无相关图标</div>
        </ul>
        <hr>
        <ul class="all-icons-list">
    
        </ul>
    </div>
    <script src="__BUILDER_JS__/icons.js?v=__VERSION__"></script>
    <script>
    
        $(function () {
            var html = "";
            for(var i=0; i<icons.length; i++){
                html += "<li><i class=\""+icons[i]+"\"></i><span>"+icons[i]+"</span></li>"
            }
            $(".all-icons-list").html(html);
            //实时查询
            $(".search-icons").on('input',function(e){
                get_result(icons, $(this).val(), 8);
            });
        })
    
        //输出结果
        function get_result(icons,keyWord,num){
            var result = search_icon(icons,keyWord,num);
            var iconHtml = "";
            for(var i=0;i<result.length;i++){
                var icon_title = '';
                if(result[i].indexOf("fa-")){
                    icon_title = result[i].slice(9);
                }
                icon_title = result[i];
                iconHtml += "<li><i class=\""+icon_title+"\"></i><span>"+icon_title+"</span></li>";
            }
            if(iconHtml == ''){
                iconHtml = '<div class="layui-inline" style="text-align: center;width:100%;color:#e2e2e2">暂无相关图标'+(keyWord==''?'':('：'+keyWord))+'</div>';
            }
            $(".search-icons-list").html(iconHtml);
        }
        
        //模糊查询
        function search_icon(icons,keyWord,num){
            if(keyWord == '') return [];
            var len = icons.length;
            var arr = [];
            var reg = new RegExp(keyWord);
            for(var i=0;i<len;i++){
                if(arr.length>=num) return arr;
                //如果字符串中不包含目标字符会返回-1
                if(icons[i].match(reg)){
                    arr.push(icons[i]);
                }
            }
            return arr;
        }
        
    </script>